<template>
  <div id="pwd">
    <header class="header">修改密码</header>
    <main>
      <input type="password" v-model="oldvalue" placeholder="旧密码">
      <input type="password" v-model="newvalue" placeholder="新密码">
      <input type="password" v-model="surevalue" placeholder="确认新密码">
      <button @click="updatepwd">确定更改密码</button>
      <!-- <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
      /> -->
    </main>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)
export default {
  data () {
    return {
      oldvalue: '',
      newvalue: '',
      surevalue: ''
    }
  },
  methods: {
    updatepwd () {
      if (this.newvalue === this.surevalue && this.oldvalue !== '' && this.newvalue !== '' && this.surevalue !== '') {
        axios.post('/users/update/pwd', {
          userid: this.$route.query.userid,
          password: this.oldvalue,
          newpwd: this.newvalue
        }).then(res => {
          if (res.data.code === '200') {
            Toast('修改成功')
            this.$router.push('/account?userid=' + this.$route.query.userid)
          } else {
            Toast('修改失败')
          }
        })
      } else {
        Toast('两次密码不一致')
      }
    }
  }
}
</script>

<style lang="scss">
@import "@/lib/reset.scss";
html, body, #pwd {
  @include rect(100%, 100%);
}
#pwd {
  .header {
    @include flexbox();
    @include rect(100% ,0.5rem);
    @include background-color(black);
    @include color(#fff);
    @include justify-content(center);
    @include align-items(center);
    @include font-size(0.2rem);
  }
  main {
    @include rect(100%, 100%);
    @include flexbox();
    @include flex-direction(column);
    @include align-items(center);
    @include background-color(#efefef);
    @include overflow(auto);
    input {
      @include rect(94%, 0.5rem);
      @include margin(0.1rem auto 0);
      @include border-radius(0.08rem);
      border: 1px solid #ccc;
      text-indent: 0.1rem;
    }
    button {
      @include rect(80%, 0.5rem);
      @include margin(0.2rem auto 0);
      @include border-radius(0.08rem);
      @include background-color(#f00);
      @include color(#fff);
      @include font-size(0.18rem);
      border: 1px solid #ccc;
    }
  }
}
</style>
